<template>
    <div>
        <div class="mall-nav">
            <div class="el-menu-demo">
                <el-button type="primary" size="mini" class="button" @click="sideDrawer = true">
                    <i class="el-icon-s-unfold"></i>
                </el-button>
                <div class="search-area">
                    <el-input placeholder="请输入内容" v-model="queryProductInfo"
                        @keyup.enter.native="queryProduct(queryProductInfo)" class="input-with-select"
                        style="border: 0">
                        <el-select v-model="select" slot="prepend" placeholder="请选择"
                            style="width: 110px; user-select: none; border: 0" :popper-append-to-body="false">
                            <el-option label="商品名称" value="1"></el-option>
                            <el-option label="商品分类" value="2"></el-option>
                            <el-option label="商品品牌" value="3"></el-option>
                        </el-select>
                        <el-button slot="append" @click="queryProduct(queryProductInfo)" type="text">搜索</el-button>
                    </el-input>
                </div>
            </div>
        </div>
        <el-drawer title="我是标题" :with-header="false" size="80%" :visible.sync="sideDrawer" direction="ltr"
            :before-close="handleClose">
            <div class="side-container">
                <div>
                    <h3>商品类型</h3>
                    <ul>
                        <li class="side-item" v-for="(item, index) in productType" :key="index"
                            @click="queryProduct(item, 'type')">{{ item }}</li>
                    </ul>
                </div>
                <div>
                    <h3>商品品牌</h3>
                    <ul>
                        <li class="side-item" v-for="(item, index) in productBrand" :key="index"
                            @click="queryProduct(item, 'brand')">{{ item }}</li>
                    </ul>
                </div>
            </div>
        </el-drawer>
    </div>

</template>

<script>
export default {
    props: {

    },
    data() {
        return {
            queryProductInfo: '',
            select: "1",
            productType: [],
            productBrand: [],
            sideDrawer: false
          
        }
    },
    created() {
        this.$http.post("/productType/findAllName").then((rep) => {
            if (rep.data.code === 200) {
                this.productType = rep.data.data;
            }
        });
        this.$http.post("/productBrand/findAllName").then((rep) => {
            if (rep.data.code === 200) {
                this.productBrand = rep.data.data;
            }
        });
    },
    methods: {
        handleClose(done) {
            done()
        },
        queryProduct(productInfo) {
            /* by 为 undefined，则代表从搜索框得到的值*/
            let by;
            switch (this.select) {
                case "1":
                    by = "name";
                    break;
                case "2":
                    by = "type";
                    break;
                case "3":
                    by = "brand";
                    break;
            }
            this.$router.push({
                path: "/MallProduct",
                query: { keyword: productInfo, by: by },
            });
            location. reload()
        },
    }
}
</script>


<style lang="less" scoped>
/deep/ .el-input__inner {
    border: 0;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    background: #f1efef;
}
/deep/ .el-input-group__append {
  border: 0;
  background: #ffffff;
  color: #ef3a3b;
}

.mall-nav {
    background-color: #fff;
    padding: 10px 20px;

}

.el-menu-demo {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search-area {
        width: 100%;
    }

    .button {
        margin-right: 20px;
        font-size: 32px;
        padding: 0;
        background-color: rgb(255, 255, 255);
        color: #e53935;
        border: none;
    }

    .classification {
        width: 10%;
    }

    .brand {
        width: 10%;
    }

    .button {
        margin-right: 20px;
        font-size: 32px;
        padding: 0;
        background-color: rgb(255, 255, 255);
        color: #e53935;
        border: none;
    }
}

.side-container {
    text-align: left;
    padding: 20px;

    .side-item {
        list-style: none;
        font-size: 16px;
        padding-bottom: 10px;
    }
}
</style>